<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Hello World</title>
    <!-- 引入Vue 3 -->
    <script src="vue3.js"></script>
  </head>
  <body>
    <!-- Vue应用挂载点 -->
    <div id="app">
      <h2>个人信息</h2>
      <p v-text="name">姓名：</p>
      <p v-html="intro">简介：</p>
      <p v-text="intro">姓名：</p>
    </div>

    <script>
      // 创建Vue应用
      const { createApp, ref } = Vue;

      // 定义应用
  const app = createApp({ // 创建Vue应用实例
        setup() { // 组合式API的入口函数
          const name = "哈喽呀"; // 定义普通数据name，值为"哈喽呀"
          const intro = '<h2>这是一个<strong>非常优秀</strong>的boy<h2>'; // 定义包含HTML标签的字符串

          // 必须 return 一个对象
          // 对象中包含的数据或方法，都可以被 HTML 结构所使用
          return {
            name, // 返回name数据，供v-text指令使用
            intro, // 返回intro数据，供v-html指令使用
          };
        },
      });

      // 挂载应用到DOM元素
      app.mount("#app");
    </script>
  </body>
</html>
